{%- liquid
  case section.settings.color_schema
    when 'white'
      assign color_style = 'light'
    when 'black'
      assign color_style = 'dark'
    else
      assign color_style = 'default'
  endcase

  assign no_menu = false
  if section.settings.footer_menu != blank
    if linklists[section.settings.footer_menu].links.size == 0
      assign no_menu = true
    endif
  else
    assign no_menu = true
  endif
-%}
{% comment %} 品牌页固定字体颜色为黑色 {% endcomment %}
{% comment %} /pages/brand-page {% endcomment %}
{% comment %} {% if request.page_type == 'page' and request.path == '/pages/about-rokid' %}
  {% assign color_style = 'special' %}
{% endif %} {% endcomment %}

<div class="site-footer site-footer-{{ section.id }} {{ color_style }} position-relative">
  {%- if section.settings.enable_gradient -%}
  <div class="flex-center h-100 overflow-hidden position-absolute w-100 footer-gradient">
      <div class="position-absolute footer-gradient-1 rounded-pill"></div>
      <div class="position-absolute footer-gradient-2 rounded-pill"></div>
    </div>
  {%- endif -%}
  {%- if section.settings.show_dividing_line -%}
     {% unless no_menu %}
  <hr class="dividing-line {% if settings.show_breadcrumb_nav %}my-0{% else %}mb-3 my-lg-0{% endif %}">
  {% endunless %}
  {%- endif -%}

  <div class="container position-relative">
    {%- if section.settings.show_breadcrumb_nav -%}
          {% render 'breadcrumbs' %}
    {%- endif -%}
    <div class="{% if no_menu %}pt-6 pb-6{% else %} {% if settings.show_breadcrumb_nav %}pt-md-7 pt-5{% else %}pt-md-9 pt-2{% endif %} pb-md-7 pb-5{% endif %}">
      <div class="{% if no_menu == true %}d-flex justify-content-around{% else %}d-lg-flex justify-content-between{% endif %}">
          <div class="start-group col-lg-2 mt-lg-0 {% if no_menu != true %}mt-md-7{% endif %}">
            {% if section.settings.logo != blank %}
                <div class="logo-footer-wrapper">
                  <a
                    href="{{ shop.url }}"
                    class="d-block logo-footer"
                    aria-label="{{ section.settings.logo.alt | escape }}">
                    {{ section.settings.logo | image_url: width: 200 | image_tag: loading: 'lazy', width: 200, height: 50 }}
                  </a>
                </div>
              {% endif %}
             {% if section.settings.address != blank %}
                <div class="address-content small richtext-with-link">
                  {{ section.settings.address }}
                </div>
              {% endif %}
             {% if section.settings.phone_number != blank or section.settings.email_address != blank %}
              <div class="small mb-4 contact-information-wrapper {% if no_menu %}text-start text-md-center{% endif %}">
                {% if section.settings.phone_number != blank %}
                  <a
                    href="tel:{{ section.settings.phone_number }} "
                    class="fw-normal d-block link-footer {{ color_style }} {% if section.settings.email_address != blank %}mb-1{% endif %}">
                    {{ section.settings.phone_number }}
                  </a>
                {% endif %}
                {% if section.settings.email_address != blank %}
                  <a
                    href="mailto:{{ section.settings.email_address }}"
                    class="fw-normal d-block link-footer {{ color_style }}">
                    {{ section.settings.email_address }}
                  </a>
                {% endif %}
              </div>
            {% endif %}
          </div>
        {% if no_menu != true %}
          <div class="mid-group col-lg-6">
            <div
              class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 align-content-start gy-md-4 gx-md-3 gy-lg-5 gx-lg-4 mb-5 mb-lg-0">
            
              {% if section.settings.footer_menu != blank %}
                {% assign mainMenu = linklists[section.settings.footer_menu].links %}
                {% if mainMenu.size > 0 %}
                  {% for menu in mainMenu %}
                    <div
                      class="col custom-{{ menu.title |  downcase | replace: ' ', '-' }}-menu">
                      {% comment %} 处理菜单标题和子菜单 {% endcomment %}
                      {% assign submenu = menu.links %}
                      <h6
                        class="small fw-bold mb-0 d-md-none d-block d-flex flex-row justify-content-between align-items-center footer-collapse-trigger"
                        data-bs-toggle="collapse"
                        data-bs-target="#card-contained-collapse{{forloop.index}}"
                        aria-expanded="false"
                        aria-controls="card-contained-collapse{{forloop.index}}">
                        <span>{{ menu.title }}</span>
                        {% if submenu.size > 0 %}
                          <span
                            class="icon-right">{% render 'icon-chevron-down' %}</span>
                        {% endif %}
                      </h6>
                      <h6
                        class="small d-md-block d-none mb-0">{{ menu.title }}</h6>
                      {% if submenu.size > 0 %}
                        <div
                          class="d-md-block collapse small"
                          id="card-contained-collapse{{ forloop.index }}">
                          <ul
                            class="list-unstyled pt-2 mb-0">
                            {% for link in submenu %}
                              <li
                                class="{% if forloop.last == true %}mt-2{% else %}my-2{% endif %}">
                                <a
                                  {% if link.url contains 'https://' %}
                                    target="_blank" rel="nofollow"
                                  {% endif %}
                                  class="text-decoration-none link-footer {{ color_style }}"
                                  href="{{ link.url }}">{{ link.title }}</a>
                              </li>
                            {% endfor %}
                          </ul>
                        </div>
                      {% endif %}
                    </div>
                    <hr class="my-3 d-md-none {% if forloop.last %}mb-0{% endif %}">
                  {% endfor %}
                {% endif %}
              {% endif %}
            </div>
          </div>
        {% endif %}
        <div class="end-group col-lg-3 mt-lg-0 {% if no_menu != true %}mt-md-7{% endif %} mb-n4">
          <div class="subscribe-width">
            {% if section.settings.show_email_signup %}
              <div>
                {% if section.settings.heading != blank %}
                  <h6 class="lead mb-3 email-title {% if no_menu %}text-start text-md-center{% endif %}">
                    {{ section.settings.heading }}
                  </h6>
                {% endif %}
                {% if section.settings.email_content != blank %}
                  <div class="small richtext-with-link mb-3 {% if no_menu %}text-start text-md-center{% endif %}">
                    {{ section.settings.email_content }}
                  </div>
                {% endif %}
                {%- assign formId = 'Contact_' | append: "footer" -%}
                <div class="mb-4">
                  {% assign api = settings.subscribe_api %}
                  {% form 'customer', id: 'footer-contact_form', class: 'as-validate-form as-newsletter-footer', data-action: api, novalidate: 'novalidate', autocomplete: "off" %}
                    <div class="form-pristine">
                      <div class="input-group input-group-sm mb-1 input-pristine">
                        <input
                          class="form-control form-control-sm pe-5"
                          style="border-width: 1px;"
                          type="email"
                          {% if api != blank %}
                          name="email"
                          {% else %}
                          name="contact[email]"
                          {% endif %}
                          id="{{ formId }}-email"
                          data-pristine-required-message="{{ 'general.subscribe.email_error_message' | t }}"
                          data-pristine-email-message="{{ 'general.subscribe.email_error_message' | t }}"
                          value="{{ form.email }}"
                          placeholder="{{ 'general.subscribe.placeholder' | t }}"
                          aria-describedby="footer-subscribe-button"
                          required>
                        <button
                          class="input-group-text px-2 border-0 ms-0 icon-wrap-sm"
                          id="footer-subscribe-button"
                          type="submit"
                          aria-label="submit">{% render 'icon-arrow-right' %}</button>
                      </div>
                    </div>
                    {% if settings.enable_gdpr_policy_checkbox %}
                      <div class="mt-3 form-pristine position-relative">
                        <div class="form-check fs-footnote input-pristine">
                          <input
                            type="checkbox"
                            data-pristine-required-message="{{ 'general.subscribe.policy_error_message' | t }}"
                            id="privacy_policy"
                            name="privacy_policy"
                            value="privacy_policy"
                            class="bg-transparent form-check-input rounded-0 text-footer"
                            required>
                          <label for="privacy_policy" class="form-check-label text-footer richtext-with-link {{ color_style }}">{{ 'general.subscribe.accept_policy_html' | t }}</label><br>
                        </div>
                      </div>
                    {% endif %}
                    <div class="text-success as-success-tips d-none fs-footnote">{{ 'general.subscribe.success_message' | t }}</div>
                    <div class="text-danger as-error-tips d-none fs-footnote">{{ 'general.subscribe.error_message' | t }}</div>
                  {% endform %}
                </div>
              </div>
            {% endif %}
            {% if section.settings.show_social_media_icons %}
              {%- liquid
                assign social_media_string = 'twitter,facebook,instagram,pinterest,snapchat,youtube,vimeo,tumblr,tiktok'
                assign social_media = social_media_string | split: ','
                assign show_media = false
                for media in social_media
                  assign social_link = media | append: '_link' | prepend: 'social_'
                  if settings[social_link] != blank
                    assign show_media = true
                    break
                  endif
                endfor
              -%}
              {% if show_media %}
                <div class="mb-4 footer-social">
                  <div class="row g-3 {% if no_menu %}justify-content-md-center{% endif %}">
                    {% for media in social_media %}
                      {% assign social_link = media | append: '_link' | prepend: 'social_' %}
                      {% if settings[social_link] != blank %}
                        <div
                          class="col-auto">
                          <a
                            {% render 'link', link: settings[social_link] %}
                            class="link-footer {{ color_style }} text-decoration-none icon-wrap-md"
                            href="{{ settings[social_link] }}">
                            {% render 'icon-social-media', media: media %}
                          </a>
                        </div>
                      {% endif %}
                    {% endfor %}
                  </div>
                </div>
              {% endif %}
            {% endif %}
           
            {%- if section.settings.google_download_link != nil or section.settings.apple_store_link != nil -%}
              <div
                class="d-flex ms-n2 mb-4">
                {%- if section.settings.google_download_link != nil -%}
                  <a
                    class="ms-2"
                    href="{{ section.settings.google_download_link }}"
                    {% render 'link', link: section.settings.google_download_link %}>
                    <img
                      src="{{ 'download-google-play.png' | asset_img_url: '135x' }}"
                      srcset="{{ 'download-google-play.png' | asset_img_url: '135x' }} 1x, {{ 'download-google-play.png' | asset_img_url: '270x' }} 2x"
                      loading="lazy"
                      alt="Get it on Google Play"
                      width="135"
                      height="41">
                  </a>
                {%- endif -%}
                {%- if section.settings.apple_store_link != nil -%}
                  <a
                    class="ms-2"
                    href="{{ section.settings.apple_store_link }}"
                    {% render 'link', link: section.settings.apple_store_link %}>
                    <img
                      src="{{ 'download-app-store.png' | asset_img_url: '135x' }}"
                      srcset="{{ 'download-app-store.png' | asset_img_url: '135x' }} 1x, {{ 'download-app-store.png' | asset_img_url: '270x' }} 2x"
                      loading="lazy"
                      alt="Download on the App Store"
                      width="135"
                      height="41">
                  </a>
                {%- endif -%}
              </div>
            {%- endif -%}
          </div>
        </div>
      </div>
    </div>
     <div class="payment-icons-group d-flex align-items-start align-items-md-center flex-column-reverse flex-lg-row-reverse justify-content-lg-between">
      {% if section.settings.show_payment_icons %}
          <ul class="mb-0 d-flex justify-content-lg-between ps-0 text-md-start text-lg-center flex-wrap" role="list">
            {% comment %} {%- for type in shop.enabled_payment_types -%}
              <li class="list-inline me-1 me-lg-0 ms-lg-1 ms-0" width="auto" height="auto">
                {{ type | payment_type_svg_tag: class: '' }}
              </li>
            {%- endfor -%} {% endcomment %}
            {% if section.settings.show_payment_icons %}
              {% assign enabled_payment_types = settings.payment_providers_id | remove: ' ' | split: ',' %}
              {% for type in enabled_payment_types %}
                {{ type | payment_type_svg_tag: class: 'list-inline me-1 me-lg-0 ms-lg-1 ms-0' }}
              {% endfor %}
            {% endif %}
          </ul>
        {% endif %}
        {% render 'region-selector' %}
    </div>
  </div>
  {% if section.settings.show_payment_icons or section.settings.copyright != blank %}
    <hr class="my-0 position-relative">
    <div class="position-relative">
      <div class="container py-3">
        <div class="copy-policy-group d-flex align-items-start align-items-md-center flex-column-reverse flex-lg-row-reverse justify-content-lg-between">
          
          {% if section.settings.footer_policy_menu != blank %}
            <ul class="mb-0 d-flex justify-content-lg-between ps-0 text-md-start text-lg-center flex-wrap" role="list">
              {% assign policyMenu = linklists[section.settings.footer_policy_menu].links %}
              {% for menu in policyMenu %}
                <li class="list-inline me-1 me-lg-0 ms-lg-1 ms-0">
                  <a
                    {% render 'link', link: menu %}
                    class="link-footer {{ color_style }}"
                    href="{{ menu.url }}">{{ menu.title }}</a>
                </li>
              {% endfor %}
            </ul>
          {% endif %}

          {% if section.settings.copyright != blank %}
            <div class="fs-footnote text-md-start text-lg-center text-footer {{ color_style }} mb-2 mb-lg-0">
              {{ section.settings.copyright }}
            </div>
          {% endif %}
        </div>
      </div>
    </div>
    <div class="as-space-add space-add"></div>
  {% endif %}
</div>

{% schema %}
  {
    "name": "Footer",
    "tag": "section",
    "class": "site-footer-section",
    "settings": [
      {
        "type": "link_list",
        "id": "footer_menu",
        "label": "Footer menu",
        "default": "footer"
      },
       {
        "type": "link_list",
        "id": "footer_policy_menu",
        "label": "Policy menus",
        "info": "This menu will be displayed beside of copyright.",
        "default": "footer"
      },
      {
        "type": "select",
        "id": "color_schema",
        "label": "Background color",
        "options": [
          {
            "value": "black",
            "label": "Black"
          }, 
          {
            "value": "white",
            "label": "White"
          }
        ],
        "default": "white"
      },
      {
        "type": "checkbox",
        "id": "enable_gradient",
        "label": "Background gradient",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_breadcrumb_nav",
        "label": "Show breadcrumb navigation",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_dividing_line",
        "label": "Show dividing line",
        "info": "This line will be displayed above the footer.",
        "default": false
      },
      {
        "type": "text",
        "id": "copyright",
        "label": "Copyright",
        "default": "Fastlane Sections Powered by Fastlane"
      },
      {
        "type": "header",
        "content": "EMAIL SIGNUP"
      }, {
        "type": "paragraph",
        "content": "Subscribers added to your “accepted marketing”[ customer list](https://help.shopify.com/en/manual/customers/manage-customers)."
      }, {
        "type": "checkbox",
        "id": "show_email_signup",
        "label": "Show email signup",
        "default": true
      }, 
      {
        "type": "text",
        "id": "heading",
        "label": "Heading",
        "default": "Sign up to our emails"
      }, 
       {
        "type": "richtext",
        "id": "email_content",
        "label": "Content",
        "default": "<p>Subscribe to get all hot deals and news which benefit you most.</p>"
      },
      {
        "type": "header",
        "content": "APP DOWNLOAD"
      }, {
        "type": "url",
        "id": "google_download_link",
        "label": "Google link"
      }, {
        "type": "url",
        "id": "apple_store_link",
        "label": "Apple Store link"
      }, 
      {
        "type": "header",
        "content": "CONTACT INFORMATION"
      }, 
      {
        "type": "image_picker",
        "id": "logo",
        "label": "Logo",
        "info": "This logo will be displayed in the footer."
      },
      {
        "type": "text",
        "id": "phone_number",
        "label": "Phone number"
      }, 
      {
        "type": "header",
        "content": "ADDRESS"
      }, 
      {
        "type": "richtext",
        "id": "address",
        "label": "Address"
      }, {
        "type": "text",
        "id": "email_address",
        "label": "Email address"
      }, {
        "type": "header",
        "content": "SOCIAL MEDIA ICONS"
      }, {
        "type": "paragraph",
        "content": "To display your social media accounts, link them in your theme settings."
      }, {
        "type": "checkbox",
        "id": "show_social_media_icons",
        "label": "Show social media icons",
        "default": true
      }, {
        "type": "header",
        "content": "PAYMENT METHODS"
      }, {
        "type": "checkbox",
        "id": "show_payment_icons",
        "label": "Show payment icons",
        "default": true
      }
    ]
  }
{% endschema %}
